<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="bar-echart"/>
</template>

<script>
// 完成加载过程
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/bar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/grid')
import { ToolboxComponent } from 'echarts/components'
echarts.use([ToolboxComponent])
export default {
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周三', '周六', '周日']
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '单选',
          type: 'bar',
          barWidth: 15,
          stack: '搜索引擎',
          emphasis: {
            focus: 'series'
          },
          data: [70, 80, 30, 90]
        },
        {
          name: '多选',
          type: 'bar',
          stack: '搜索引擎',
          emphasis: {
            focus: 'series'
          },
          data: [300, 200, 101, 134]
        },
        {
          name: '简答题',
          type: 'bar',
          stack: '搜索引擎',
          emphasis: {
            focus: 'series'
          },
          data: [200, 82, 91, 84]
        }
      ]
    })
  }
}
</script>

<style scoped>
.bar-echart {
  width: 220px;
  height: 150px;
  margin: auto;
}
</style>
